<template>
  <el-dialog
    append-to-body
    :title="info"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    align="left"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    width="600px">
    <el-form ref="form" label-width="150px">
      <el-form-item label="当前余额" align="left">
        <span class="price-font" v-text="'￥'+ToMoney(currMoney)"></span>
      </el-form-item>
      <el-form-item label="充值金额" align="left">
        <el-select v-model="money" placeholder="placeholder">
          <el-option
            v-for="(value,index) in moneyArr"
            :key="index"
            :label="value"
            :value="value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式" align="left">
        <el-select v-model="payType" placeholder="支付方式">
          <el-option
            v-for="(item,index) in payTypeArr"
            :key="index"
            :label="item.name"
            :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item align="left">
        <el-button type="primary" @click="aliPayRedirect">确认充值</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: 'RechargeDialog',
  props:{
    successFunction:Function
  },
  data: function () {
    return {
      info:'店铺充值-支付',
      dialogVisible: false,
      payTypeArr:[],
      moneyArr:[0.03,100,200,500,1000,2000,5000,10000,20000],
      payType:2,
      money:0,
      currMoney:0
    }
  },
  mounted () {
    this.money=this.moneyArr[0]
    this.payTypeArr=[
      {
        key:2,
        name:'支付宝'
      },
    ]
    this.getMoney()
  },
  methods: {
    open:function () {
      this.money=this.moneyArr[0]
      this.payTypeArr=[
        {
          key:2,
          name:'支付宝'
        },
      ]
      this.getMoney()
      this.dialogVisible=true
    },
    aliPayRedirect:function () {
      let $this=this
      $this.MyRequest(this.ApiDoNameShop+"Shop/recharge",{
        money:this.money,
        payType:this.payType
      },function (data) {
        localStorage.setItem('AlipayString',data)
        let url='/static/alipay.html'
        if ($this.payType!==3){
          window.open(url, '', 'width=1024,height=768,menubar=no,toolbar=no,status=no,scrollbars=yes')
        }else{
          $this.systemBank=data
        }
        $this.$forceUpdate()
      })
    },
    getMoney:function () {
      let $this=this
      $this.MyRequest(this.ApiDoNameShop+"Shop/money",{},function (money) {
        $this.currMoney=money
        $this.$forceUpdate()
      })
    }
  }
}
</script>

<style scoped>
  .qr-box{ padding: 5px; border: 1px solid #EEEEEE; width: 185px; height: 235px; border-radius: 4px; position: relative; text-align: center}
  .qr-box>.fade{ width: 170px; height: 110px; position: absolute; left: 2px; top: 2px; background: rgba(0,0,0,.5); z-index: 9999; padding-top: 80px; padding-left: 10px; padding-right: 10px; text-align: center}
  .qr-box>.fade>span{ color: #FFFFFF;}
</style>
